<template>
  <el-popover popper-class="user-setting" placement="right-start" width="120" trigger="click">
    <div class="us-item pointer">
      <span>{{ loginInfo.username || 'unknow' }}</span>
    </div>
    <router-link v-authority="'ROLE_ADMIN'" class="us-item pointer" to="/userManagement">
      <i class="el-icon-user f22"></i>
      <span class="ml12">用户管理</span>
    </router-link>
    <div class="us-item pointer">
      <IconExit />
      <el-popconfirm title="确认退出？" confirm-button-type="text" @confirm="handleSignOut">
        <span class="ml12" slot="reference">退出登录</span>
      </el-popconfirm>
    </div>

    <!-- <IconAvatar slot="reference" class="pointer mt20" /> -->
    <template #reference>
      <slot name="reference"></slot>
    </template>
  </el-popover>
</template>

<script>
import { apiLogout } from '@/api/login/index'

// util
import { getLoginInfo } from '@/utils/storage'
import { toSignInPage } from '@/utils/profile'

export default {
  name: 'UserProfilePopover',

  data() {
    return {
      loginInfo: getLoginInfo() || {}
    }
  },

  methods: {
    handleSignOut() {
      apiLogout()
        .then(res => {
          // console.log('handleSignOut', res)
          toSignInPage()
        })
        .catch(err => {
          console.log('apiLogout', err)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
